// pages/share/share.js
var app = getApp();
var util = require('../../../utils/util.js');
Page({

  /**
   * 页面的初始数据
   */
  data: {
    canvasHidden: true, //设置画板的显示与隐藏，画板不隐藏会影响页面正常显示
    windowWidth: '',
    posterHeight: '',
    avatarUrl: "",
    textName: "",
    textVivo: "",
    textImg: "",
    rwmImg: "",
  },
  _init: function() {
    var that = this;
    var common_image = 'https://bailide.qidian2018.com/uploads/20190603/04fb5460aa33a3b9656d8e0dd2e9f723.jpg'
    wx.downloadFile({
      url: common_image,
      success: function(result) {
        that.setData({
          avatarUrl: result.tempFilePath,
          textVivo: 'neirong',
        })
      }
    })
    wx.downloadFile({
      url: 'https://bailide.qidian2018.com/uploads/20190604/9b06416a67016e6f7a36ba438a539d1f.png',
      success: function(result) {
        that.setData({
          textImg: result.tempFilePath,
        })
      }
    })
    wx.downloadFile({
      url: 'https://bailide.qidian2018.com/uploads/20190606/6ffb1f55d06284927d64e5f359945b6b.jpg',
      success: function(result) {
        that.setData({
          rwmImg: result.tempFilePath,
        })
      }
    })

  },
  onLoad: function(options) {
    var that = this;
    that._init()
    wx.getSystemInfo({
      success: res => {
        that.setData({
          screenWidth: res.screenWidth,
          screenHeight: res.screenHeight
        })
      }
    })
  },

  saveImg: function(e) {
    var that = this;

    console.log(that.data.avatarUrl)
    that.setData({
      canvasHidden: false
    })

    const systemInfo = wx.getSystemInfoSync()

    wx.getSystemInfo({
      success: res => {
        console.log(res);
        that.setData({
          screenWidth: res.screenWidth,
          screenHeight: res.screenHeight
        })
      }
    })
    var unit = that.data.screenWidth / 375;
    var butback = "/images/bgbgbg.png";
    const ctx = wx.createCanvasContext('starkImg');
    ctx.drawImage(butback, 0, 0, unit * 375, 500);
    //正文图片
    ctx.drawImage(that.data.textImg, 20, 136, unit * 335, 188, 0, 0);
    //二维码
    ctx.drawImage(that.data.rwmImg, 20, 370, 120, 120, 0, 0);
    var txt1 = "长按识别二维码";
    var txt2 = "进入舒适快讯阅读全文";
    ctx.setFontSize(13)
    ctx.fillText(txt1, 168, 410);
    ctx.fillText(txt2, 168, 435);
    ctx.setFontSize(14)
    ctx.fillText(that.data.textName + ' 正在舒适快讯阅读这篇文章', 78, 45);
    // ctx.fillText(that.data.textVivo,10, 150);
    var chr = that.data.textVivo.split(""); //这个方法是将一个字符串分割成字符串数组
    var temp = "";
    var row = [];
    ctx.setFontSize(18)
    ctx.setFillStyle("#000")
    for (var a = 0; a < chr.length; a++) {
      console.log(ctx.measureText(temp).width);
      console.log(unit * 335);
      if (ctx.measureText(temp).width < unit * 335) {
        temp += chr[a];
      } else {
        a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
        row.push(temp);
        temp = "";
      }
    }
    row.push(temp);

    //如果数组长度大于2 则截取前两个
    if (row.length > 2) {
      var rowCut = row.slice(0, 2);
      var rowPart = rowCut[1];
      var test = "";
      var empty = [];
      for (var a = 0; a < rowPart.length; a++) {
        if (ctx.measureText(test).width < 335) {
          test += rowPart[a];
        } else {
          break;
        }
      }
      empty.push(test);
      var group = empty[0] + "..." //这里只显示两行，超出的用...表示
      rowCut.splice(1, 1, group);
      row = rowCut;
    }
    for (var b = 0; b < row.length; b++) {
      ctx.fillText(row[b], 16, 100 + b * 20, 300);
    }

    ctx.arc(35, 40, 25, 0, 2 * Math.PI);
    ctx.clip();
    ctx.drawImage(that.data.avatarUrl, unit * 10, unit * 10, unit * 55, unit * 55);
    ctx.restore();
    ctx.draw();
    // return false;
    //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
    setTimeout(function() {
      util.showLoading('保存中');
      wx.canvasToTempFilePath({
        canvasId: 'starkImg',
        success: function(res) {
          var tempFilePath = res.tempFilePath;
          that.setData({
            imagePath: tempFilePath,
            canvasHidden: true
          });

          if (!res.tempFilePath) {
            wx.showModal({
              title: '提示',
              content: '图片绘制中，请稍后重试',
              showCancel: false
            })
          }
          //画板路径保存成功后，调用方法吧图片保存到用户相册
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            //保存成功失败之后，都要隐藏画板，否则影响界面显示。
            success: (res) => {
              //  console.log(res)
              wx.hideLoading()
              wx.showToast({
                title: '保存成功',
              })
              that.setData({
                canvasHidden: true
              })
            },
            fail: (err) => {
              // console.log(err)
              wx.hideLoading()
              that.setData({
                canvasHidden: true
              })
            }
          })
        },
        fail: function(res) {
          console.log(res);
        }
      });
    }, 200);
    // }
  },
})